<template>
  <view :class="multiple ? 'upload-grid' : 'signle-file'">
    <view v-if="multiple" class="upload-item" v-for="(item, index) in fileList" :key="index">
      <view class="">
        <u-image
          @tap="$preview(fileList.map(item => item.Value), index)"
          :border-radius="10"
          width="200rpx"
          height="200rpx"
          :src="$getImageUrl(item.Value)"
        ></u-image>
      </view>
      <view v-if="!readonly" class="u-delete-icon" @tap.stop="deleteFile(index)" :style="{ background: '#fa3534' }">
        <u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
      </view>
    </view>
    <u-image
      @tap="$preview(value)"
      v-if="readonly && !multiple"
      :width="200"
      :height="200"
      :src="$getImageUrl(value)"
    ></u-image>
    <u-upload
      v-if="!readonly"
      class="upload-item"
      :show-progress="false"
      :auto-upload="false"
      :show-upload-list="!multiple"
      @on-choose-complete="onFileChange"
      @on-remove="deleteFile"
      :max-count="!multiple ? 1 : 99"
      :upload-text="uploadText"
    ></u-upload>
  </view>
</template>

<script>
export default {
  name: 'image-upload',
  props: {
    value: {
      type: [Array, String],
      default() {
        return [];
      }
    },
    maxCount: {
      type: Number,
      default: 99
    },
    uploadText: {
      type: String,
      default: '上传图片'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },

  created() {
    if (this.value && this.value.length > 0) {
      if (this.multiple) {
        this.fileList = this.value.filter(item => item.Value);
      } else {
        this.fileList = [
          {
            url: this.$getImageUrl(this.value)
          }
        ];
      }
    }
  },

  watch: {
    value(val) {
      console.log('value', val);
      if (val) {
        if (this.multiple) {
          this.fileList = val.filter(item => item.Value);
        } else {
          this.fileList = [
            {
              url: this.$getImageUrl(this.value)
            }
          ];
        }
      }
    }
  },

  data() {
    return {
      fileList: []
    };
  },
  methods: {
    onFileChange(list, name) {
      let me = this;
      const file = list[list.length - 1].file;
      this.$fileUpload(file).then(res => {
        if (me.multiple) {
          me.fileList.push({
            Value: res.key,
            TypeId: 1
          });
          me.$emit('input', this.fileList);
          me.$emit('change', this.fileList);
        } else {
          me.fileList = [
            {
              Value: res.key,
              TypeId: 1
            }
          ];
          me.$emit('input', res.key);
          me.$emit('change', res.key);
        }
      });
    },

    deleteFile(index) {
      if (!this.multiple) {
        this.$emit('input', '');
        this.$emit('change', '');
        this.fileList = [];
        return false;
      }

      uni.showModal({
        title: '提示',
        content: '您确定要删除此项吗？',
        success: res => {
          console.log(res);
          if (res.confirm) {
            this.fileList.splice(index, 1);
            uni.hideToast();
            this.$emit('input', this.fileList);
            this.$emit('change', this.fileList);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.signle-file {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.upload-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200rpx);
  grid-template-rows: repeat(auto-fill, 200rpx);
  gap: 15rpx;
  margin: 10rpx 30rpx;

  grid-auto-rows: 200rpx;

  .upload-item {
    border: 1px solid rgb(235, 236, 238);
    border-radius: 10rpx;
    box-sizing: border-box;
    position: relative;
  }

  .u-delete-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    z-index: 10;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/deep/.u-list-item {
  margin: 0 !important;
}
</style>
